<!DOCTYPE html>
<html lang="en">

<head>
    <me`ta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../vue.js"></script>
        <link rel="stylesheet" href="./1.min.css">
        <style>


        </style>
</head>

<body>
    <div id="wrap">
        <div class="title"><input type="text" v-model="info"> <button @click="addInfo">add</button></div>

        <li v-for="(item,index) in arr" :key="item.id" :class="item.status ? 'active' : ''">
            {{index+1}}:{{item.message}}
            <button name="index" @click="removeinfo(index)">删除</button>
            <button @click="overinfo($event,index)" v-if="item.status">已完成了哦</button>
            <button v-else @click="overinfo($event,index)">未完成哦</button>
        </li>

    </div>
</body>
<script>

    new Vue({
        el: '#wrap',
        data: {
            info: '',
            arr: [
                { message: '请输入您的计划清单', status: false },
            ]
        },
        methods: {

            addInfo() {
                if (this.info) {
                    this.arr.push({ message: this.info, status: false })
                    this.info = ''
                }
            },
            overinfo(e, i) {
                this.arr[i].status = this.arr[i].status == true ? false : true
            },
            removeinfo(i) {
                this.arr.splice(i, 1)
            }
        }
    })

</script>

</html>